<template>
<div>
  <el-row>
  <el-col :span="8"><div class="grid-content bg-purple" >
    <el-tree :data="menus" :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
      
  </div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple-light" style="margin-left:20px">
   <div class="mod-config">
        <el-form :inline="true" :model="dataForm">
          <el-form-item>
            <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="searchGoodsName">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          border
          v-loading="dataListLoading"
          :data="data"
          @selection-change="selectionChangeHandle"
          header-cell-class-name="table-header"
        >
          <el-table-column type="selection"  align="center" width="50"></el-table-column>
          <el-table-column prop="attrGroupId"  width="100" align="center" label="id">
            <template #default="scope">
              {{scope.row.goodsId}}
            </template>
          </el-table-column>
          <el-table-column prop="attrGroupName"  align="center" label="商品名称">
              <template #default="scope">
              {{scope.row.goodsName}}
              </template>
          </el-table-column>
          <el-table-column prop="sort" align="center" label="商品图标">
            <template #default="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.goodsBigLogo"
                            :preview-src-list="[scope.row.goodsBigLogo]"
                        ></el-image>
                    </template>
          </el-table-column>
          <el-table-column prop="descript" align="center" label="商品描述">
              <template #default="scope">
              {{scope.row.goodsIntroduce}}
            </template>
          </el-table-column>
           <el-table-column align="center" label="商品详情">
              <template #default="scope">
                <div style="overflow:scroll;height:200px">
              <el-image v-for="url in scope.row.details" :key="url.id" :src="url.imgUrl" lazy style="list-style-type:none"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            width="150"
            label="操作"
          >
            <template #default="scope">
              <el-button type="text" size="small" @click="getDetails(scope.row.goodsId)">关联</el-button>
              <el-button type="text" size="small" @click="delDetails(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="goodsList.length"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
      </div>    
  </div></el-col>
</el-row>
<el-dialog title="商品详情" :visible.sync="dialogFormVisible" width="30%" center>
  <div style="margin-left:80px;">
  <el-upload
  class="upload-demo"
  drag
  action="http://localhost:8002/admin/goods/upload"
  :on-success="successUpload"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <template #tip>
    <div class="el-upload__tip">
      只能上传 jpg/png 文件，且不超过 500kb
    </div>
  </template>
</el-upload>
</div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addDetails">确 定</el-button>
    </span>
  </template>
</el-dialog>
</div>
</template>

<script>
import {CategoryTree,catGoods,addDetails,delDetails,seachGoods} from '@/api/index'
export default {
  data() {
    return {
       query: {
            pageIndex: 1, //当前页
            pageSize: 5   //页面所显示的条数 写死的
            },
      menus:[],
      catId: 0,
      dataForm: {
        key: ""
      },
      defaultProps: {
        children: 'goodsTypeList',
        label: 'name'
      },
      dataListLoading:false,
      goodsList:[],
      dialogFormVisible:false,
      goodsDetails:{
        detailsImgUrl:[]
      },
      goodsId:0,
      imgUrl:[]
    };
    },
     computed:{
        data(){
          return this.goodsList.slice((this.query.pageIndex-1)*this.query.pageSize,(this.query.pageIndex*this.query.pageSize))
        }
    },
    created(){
        this.getCategoryTree()
    },
    methods: {
      //搜索
      searchGoodsName(){
         if(this.dataForm.key.length<=0){
           this.$message.error("搜索框不能为空");
           return ;
         }
         seachGoods(this.dataForm.key).then(res=>{
            this.goodsList=res.data.data
         })
      },
      // 分页
      handlePageChange(current){
           this.query.pageIndex=current
            console.log(this.pageIndex)
      },
      // 获取tree数据
      handleNodeClick(data,node,component) {
        console.log(data)
         if(node.level===3){
           this.catId=data.catId
           this.getGoodsList()
         }
      },
      // 删除
      delDetails(row){
          let name=row.goodsName
          this.$confirm('是否删除【'+name+"】", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delDetails(row.goodsId).then(res=>{
             if(res.code==200){
               this.$message.success("删除成功");
               this.getGoodsList()
             }
           })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getGoodsList(){
        catGoods(this.catId).then(res=>{
              this.goodsList=res.data.data
           })
      },
      //获取分类数据
      getCategoryTree(){
        CategoryTree().then(({data})=>{
            console.log(data)
          this.menus=data.all
        })
      },
      //获取上传的图片地址
      successUpload(val){
          
          this.imgUrl.push(val.data.data)
      },
      addDetails(){
       
        this.imgUrl.forEach(element=>{
          let params=new FormData();
          params.append("goodsId",this.goodsId)
          params.append("imgUrl",element)
          addDetails(params);
          this.$message.success("操作成功");
          this.getGoodsList()
          this.dialogFormVisible=false 
          
        })
        
      },
      selectionChangeHandle(){

      },
      getDetails(data){
        this.dialogFormVisible=true
        this.goodsId=data
      }
    }
}
</script>

<style>

</style>